<template>
  <div class="main">
    <h2>声明响应式状态</h2>

    <div class="group">
      <h3>ref() 函数</h3>
      <div class="content">
        <p>numC: {{ numC }}</p>
        <p>dataNumC: {{ dataNumC }}</p>
        <p>{{ dataBool ? dataStr : '阿里巴巴' }}</p>
        <p>
          <button type="button" @click="accNum">累加</button>
          <button type="button" @click="accNumC">普通变量累加</button>
          <button type="button" @click="accDataNumC">响应式变量累加</button>
        </p>
      </div>
    </div>

    <div class="group">
      <h3 @click="editAllRefData">ref()函数 - 深层响应性</h3>
      <div class="content">
        <p @click="accDataobjCount">dataObj1.count: {{ dataObj1.count }}</p>

        <ul @click="pushDataObjStrArr">
          <li v-for="(item, index) in dataObj1.strArr" :key="index">{{ item }}</li>
        </ul>

        <p @click="editSex">Username:{{ dataObj1.user.name }} sex:{{ dataObj1.user.sex }}</p>
        <ul>
          <li v-for="(item, key, index) in dataObj1.user" :key="index">
            key:{{ key }} - value:{{ item }}
          </li>
        </ul>
      </div>
    </div>

    <div class="group">
      <h3 @click="editAllReactiveData">reactive() 函数:将使对象本身具有响应性</h3>
      <div class="content">
        <p @click="accDataobjCount2">dataObj2.count: {{ dataObj2.count }}</p>
        <ul @click="pushDataObjStrArr2">
          <li v-for="(item, index) in dataObj2.strArr" :key="index">{{ item }}</li>
        </ul>

        <p @click="editSex2">Username:{{ dataObj2.user.name }} sex:{{ dataObj2.user.sex }}</p>
        <ul>
          <li v-for="(item, key, index) in dataObj2.user" :key="index">
            key:{{ key }} - value:{{ item }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, type Ref } from 'vue'

let numC = 0
let dataNumC: Ref<number> = ref(0)
let dataBool = ref<boolean>(true)
let dataStr = ref<string>('鸿蒙开发')

interface Iuser {
  name: string
  sex: string
}

interface IdataObj1<T> {
  count: number
  strArr: string[]
  user: T
}
// 深层响应性 ref
let dataObj1 = ref<IdataObj1<Iuser>>({
  count: 0,
  strArr: ['javascript', 'java', 'php', 'Arkts', 'webpack', 'go'],
  user: {
    name: 'java',
    sex: '其它'
  }
})
// 替换ref根级别的值
function editAllRefData() {
  dataObj1.value = {
    count: 100,
    strArr: ['java', '刘强东', '马云', '马化腾', '任正非'],
    user: {
      name: '周志超',
      sex: 'nv'
    }
  }
}

function accDataobjCount() {
  dataObj1.value.count++
}
function pushDataObjStrArr() {
  dataObj1.value.strArr.push('myspl')
}
function editSex() {
  dataObj1.value.user.sex = '未知'
}

// reactive 初始化响应式数据对象
let dataObj2: IdataObj1<Iuser> = reactive({
  count: 0,
  strArr: ['javascript', 'java', 'php', 'Arkts', 'webpack', 'go'],
  user: {
    name: 'java',
    sex: '其它'
  }
})

// 因为ref 的引用值是用 reactive 包裹的，所以ref具有深层响应性
// ref的value对应的是一个 reactive 包裹的响应式对象
console.log(dataObj1.value, 'ref响应式对象')
console.log(dataObj2, 'reactive响应式')

// 替换 reactive 根级别的值
// 修改函数：更新对象的属性（不是重新赋值整个对象）
function editAllReactiveData() {
  dataObj2.count = 100
  dataObj2.strArr = ['java', '刘强东', '马云', '马化腾', '任正非']
  dataObj2.user.name = '周志超'
  dataObj2.user.sex = 'nv'
}

function accDataobjCount2() {
  dataObj2.count++
}
function pushDataObjStrArr2() {
  dataObj2.strArr.push('ArkUI')
}
function editSex2() {
  dataObj2.user.sex = '熟知'
}
function accNum() {
  // 响应式原理：只要状态变量改变，程序都最后会触发UI的渲染，非状态变量也会被感染
  numC++
  dataNumC.value++
  console.log(numC, '#numC', dataNumC.value, '#dataNumC')
}

// 普通变量累加
const accNumC = () => {
  numC++
  console.log(numC, 'numC')
}

// 响应式变量累加
function accDataNumC() {
  dataNumC.value++
  console.log(dataNumC.value, 'dataNumC.value')
}

//
</script>

<style lang="scss" scoped>
@import '@/assets/groupDemo.scss';

.active {
  color: darkorange;
}
.text-danger {
  background-color: red;
}
.text-danger2 {
  background-color: green;
}
.active-new {
  font-size: 22px;
}
</style>
